<template>
  <div class="sign-page" >

    <div class="back" @click="goContent(item,'/signUp')">
      <img src="@/assets/image/md-arrow_back.svg" />
    </div>
    <div class="main-box">
      考试报名页
    </div>
    <div class="info">
      <div class="exam-info">
        <img src="@/assets/image/exam-item.png" alt="">
        <div class="examinfo">
          <span class="name" :title="paperList.name">{{paperList.name}}</span>
          <div>
            <span class="baoming">正在报名</span><span class="num">已报名人数：{{paperList.userKaoshiCount}} 人</span>
          </div>
          <span class="stoptime">报名截止时间:&nbsp;&nbsp;{{paperList.baomingEndTime}}</span>
          <span class="examtime">考试时间:&nbsp;&nbsp;{{paperList.startTime}}</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="examinee-info">
        <div class="kaosheng-icon">
          <img src="@/assets/image/kaosheng-info.png" alt="">
          <span class="kaosheng">考生信息</span>
        </div>

        <div class="input-info">
          <div class="info1">
            <span>姓名</span><input disabled="disabled" v-model="name" />
          </div>
          <div class="info1">
            <span>身份证</span><input disabled="disabled" v-model="shenfenzheng" />
          </div>
          <div class="info1">
            <span>手机号</span><input v-model="phone"  type="number" oninput="if(value.length>11)value=value.slice(0,11)"/>
          </div>
        </div>
      </div>

      <div class="submit" @click="save">
        <span>提交报名信息</span>
      </div>

    </div>
  </div>


</template>

<script>
import 'babel-polyfill'
import Pagination from '@/components/pagination.vue'
import Cookies from 'js-cookie'
import nodata from '@/components/nodata.vue'
import $ from "jquery"
import { Notification } from 'element-ui';
export default {

    components: {
        'ui-pagination':Pagination,
        nodata
    },
    data(){
        return{
          // id:"1400261019549147136",
          paperList:[],
          name:'',
          shenfenzheng:'',
          userData:[],
          phone:'',
          kaoshiId:'',
        }
    },
    created(){
      if( uni.getStorageSync('userData')){
          this.userData = JSON.parse(uni.getStorageSync('userData'))
          
          this.name = this.userData.nickName;
          this.shenfenzheng = this.userData.property1.idCard;
          this.phone = this.userData.mobile
          console.log(this.userData.property1.idCard)
      }

      this.getData();
    },
    mounted(){

    },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
        },
        goPage(){

        },
        goContent(item,url){
            this.$router.push(url);
        },
        pageChange(index){

        },
        getData(){
          let list;
          list = this.$route.params;
           console.log("理解")
          console.log(list)
          this.kaoshiId = list.id;
          this.paperList = list;

          // let that = this;
          // this.$axios.$post("/f/getPaperByKaoshi?id="+that.id)
          // .then(function (response) {
          //   console.log(response,9090)
          //       // that.start = true;
          //       let list = response.data;
          //       // if(list.length!=0){
          //       //     let starttime;
          //       //     let endtime;
          //       //     let nowtime = new Date().getTime();
          //       //     let start,end;
          //       //     list.forEach((item,i)=>{
          //       //       start= item.baomingStartTime;
          //       //       start = start.replace(/-/g,'/'); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
          //       //       starttime = new Date(start).getTime()

          //       //       end = item.baomingEndTime;
          //       //       end = end.replace(/-/g,'/');
          //       //       endtime = new Date(end).getTime()

          //       //       if(starttime>nowtime){
          //       //         //报名未开始
          //       //         item.baoming = '1'
          //       //       }
          //       //       if(starttime<nowtime && nowtime<endtime){
          //       //         //报名开始
          //       //         item.baoming = '2'
          //       //       }
          //       //       if(endtime<nowtime){
          //       //         //报名结束
          //       //          item.baoming = '3'
          //       //       }
          //       //     })
          //       // }
          //       console.log('hha ')
          //       console.log(list)
          //       that.paperList = list;
          // })
          // .catch(function (error) {
          //     // handle error
          //     console.log(error);
          // })
        },
        save(){
          let that = this;
          if(this.phone==""){
              Notification.warning({
                title:'提示',
                message:"请输入手机号"
              });
              return;
          }
          else if(!(/^1[3456789]\d{9}$/.test(this.phone))){
              Notification.warning({
                title:'提示',
                message:"请输入正确的手机号"
              });
              return;
          }
          let url ="/f/saveUserKaoshiJoin"
          this.$axios.$get(url+"?kaoshiId="+this.kaoshiId+"&mobile="+this.phone)
          .then(function (response) {
                that.$confirm('报名成功！', '提示', {
                  confirmButtonText: '确定',
                  showCancelButton:false,
                  type: 'warning'
                }).then(() => {
                  that.$router.push('/signUp');
                }).catch(() => {

                });
          })
          .catch(function (error) {
            console.log(error);
          })
        }

    }
}
</script>

<style lang="less">
   .sign-page{
     width: 100%;
     height: 100%;
     .main-box{
       width: 100%;
       height: 50px;
       line-height: 50px;
       font-size: 30px;
       text-align: center;
       color: #399ee4;
     }
     .back{
       width: 29px;
       height: 29px;
       margin-top: 36px;
       margin-left: 29px;
       cursor: pointer;
       img{
         width: 100%;
         height: 100%;
       }
     }
     .info{
       margin-top: 60px;
       margin-left: calc(50% - 297px);
       width: 594px;
       height: 535px;
       line-height: 23px;
       background-color: rgba(239, 250, 255, 100);
       text-align: center;
       border: 1px solid rgba(255, 255, 255, 100);
       .exam-info{
         width: 100%;
         display: flex;
         img{
           margin-top: 10px;
           margin-left: 28px;
           width: 71px;
           height: 83px;
         }
         .examinfo{
           width: 100%;
           margin-left:33px ;
           display: flex;
           flex-direction: column;
           justify-content: space-around;
           align-items: flex-start;
           .name{
             cursor: pointer;
             width: 400px;
             display: inline-block;
             overflow:hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
             margin-top: 17px;
              height: 28px;
              color: rgba(16, 16, 16, 100);
              font-size: 20px;
              text-align: left;
              font-family: PingFangSC-regular;
           }
           div{
             margin-top: 17px;
             width:calc(100% - 171px);
             display: flex;
             justify-content: space-between;
               .baoming{
                height: 22px;
                color: rgba(242, 45, 45, 100);
                font-size: 16px;
                text-align: left;
                font-family: PingFangSC-regular;
             }
             .num{
                height: 20px;
                color: rgba(157, 155, 155, 100);
                font-size: 14px;
                text-align: left;
                font-family: PingFangSC-regular;
             }
           }
           .stoptime{
              margin-top: 40px;
              height: 22px;
              color: rgba(57, 158, 228, 100);
              font-size: 16px;
              text-align: left;
              font-family: PingFangSC-regular;
           }
           .examtime{
              margin-top: 28px;
              height: 22px;
              color: rgba(57, 158, 228, 100);
              font-size: 16px;
              text-align: left;
              font-family: PingFangSC-regular;
           }
         }

       }
       .line{
         margin-left:34px;
         margin-right: 33px;
         margin-top:47px ;
         // width: 100%;
         height: 1px;
         border: 1px solid rgba(187, 187, 187, 100);
       }
       .examinee-info{
          width: 100%;
         .kaosheng-icon{
           width: 100%;
           padding-left:34px;
           display: flex;
           img{
             width: 71px;
             height: 80px;
             margin-top: 24px;
           }
           .kaosheng{
             margin-top: 40px;
             margin-left: 25px;
             width: 80px;
             height: 28px;
             color: rgba(16, 16, 16, 100);
             font-size: 20px;
             text-align: left;
             font-family: PingFangSC-regular;
           }
         }
        .input-info{
          margin-top: 27px;
          height: 150px;
          width: 50%;
          margin-left: 132px;
          margin-right: 191px;
          .info1{
            display: flex;
            justify-content: space-between;
            margin-top: 11px;
            span{
              color: rgba(57, 158, 228, 100);
              font-size: 16px;
              text-align: left;
              font-family: SourceHanSansSC-bold;
              font-weight: bold;
            }
            input{
            width: 200px;
            height: 30px;
            color: rgba(136, 136, 136, 100);
            font-size: 14px;
            text-align: left;
            font-family: Microsoft Yahei;
            border: 1px solid rgba(187, 187, 187, 100);
            }
          }

        }

       }
       .submit{
         cursor: pointer;
         margin-top: 47px;
         margin-left:calc(50% - 70px);
         width: 140px;
         height: 39px;
         border-radius: 4px;
         background-color: rgba(57, 158, 228, 100);
         text-align: center;
         line-height: 39px;
         border: 1px solid rgba(187, 187, 187, 100);
        span{
          width: 108px;
          height: 27px;
          color: rgba(253, 253, 255, 100);
          font-size: 18px;
          text-align: left;
          font-family: SourceHanSansSC-bold;
        }
       }
     }
   }


</style>
